<div class="container">
  <h2>Profile (Microfrontend)</h2>
  <p>
    This profile component is being remotely loaded into the application using
    Module Federation, angular is shared so the download is minimal for the
    frontend
  </p>

  <div class="card">
    <div class="card-body">
      <form [formGroup]="angForm">
        <div class="form-group">
          <input
            type="text"
            class="form-control"
            formControlName="name"
            placeholder="Name"
            #name
          />
          <div
            *ngIf="
              angForm.controls['name'].invalid &&
              (angForm.controls['name'].dirty ||
                angForm.controls['name'].touched)
            "
            class="alert alert-danger"
          >
            <div *ngIf="angForm.controls['name'].errors.required">
              Name is required.
            </div>
          </div>
        </div>
        <div class="form-group">
          <input
            type="email"
            class="form-control"
            formControlName="email"
            placeholder="Email"
            #email
          />
          <div
            *ngIf="
              angForm.controls['email'].invalid &&
              (angForm.controls['email'].dirty ||
                angForm.controls['email'].touched)
            "
            class="alert alert-danger"
          >
            <div *ngIf="angForm.controls['email'].errors.required">
              Email is required.
            </div>
          </div>
        </div>
        <div class="form-group">
          <button
            (click)="addUser(name.value, email.value)"
            class="btn btn-primary"
            [disabled]="angForm.pristine || angForm.invalid"
          >
            Create User
          </button>
        </div>
      </form>
    </div>
  </div>

  <br />
  <lib-mdmf-shared></lib-mdmf-shared>

  <app-profile-list-user></app-profile-list-user>
</div>
